<!--  -->
<template>
  <div class="container">
    <div class="back-box">
      <div class="btn-back" @click="goBack">
        <img src="@/assets/img/back.png" alt="" />
        <span>返回</span>
      </div>
    </div>
    <div class="user-import-box">
      <div class="select-down-box">
        <div class="select">
          <div class="file-box">
            <input type="file" />
            <button class="el-button el-button--primary">
              选择Excel表格文件
            </button>
          </div>
          <a href=""> 点击链接下载「学员批量导入模板」 </a>
        </div>
      </div>

      <div class="rules">
        <div class="title">用户批量导入规则介绍</div>
        <div class="rule-item" v-for="item in importData" :key="item.id">
          <div class="item-title">{{ item.title }}</div>
          <div class="item-desc">
            <span class="c-red" v-if="item.must">必填</span>
            <span v-else>选填</span>
            <div>{{ item.txt }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用

  components: {},
  data() {
    //这里存放数据
    return {
      importData: [
        {
          must: true,
          id: 1,
          title: "1.手机号",
          txt: " - 支持中国大陆手机号，标准的11位，不需要在手机号前面添加（+86）区号 ",
        },
        {
          must: true,
          id: 2,
          title: "2.密码",
          txt: "  - 任意英文+数字的组合字符串 ",
        },
        {
          must: false,
          id: 3,
          title: "3.VIP",
          txt: "   - 请填写[后台-运营-VIP会员]列表显示的ID  ",
        },
        {
          must: false,
          id: 4,
          title: "4.VIP过期时间",
          txt: "   - 时间格式为：YYYY-mm-dd HH:ii:ss 2022-04-08 12:00:00 ",
        },
        {
          must: false,
          id: 5,
          title: "5.是否锁定",
          txt: "   - 可填写值：[1, 0] - 1:锁定意味着无法登录,0:不锁定意味着无登录限制  ",
        },
        {
          must: false,
          id: 6,
          title: "6.标签",
          txt: "   - 任意的字符串，多个标签请用英文逗号分割 - 例如我想给用户打上“大客户”+“精神小伙”这两个标签的话，可以这样输入：大客户,精神小伙  ",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goBack: function () {
      this.$router.go(-1);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.container {
  flex: 1;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 5px 20px 20px;
  overflow-y: auto;
  background-color: #f1f2f9;
  .back-box {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    .btn-back {
      font-size: 14px;
      font-weight: 400;
      color: #333;
      cursor: pointer;
      display: flex;
      align-items: center;

      img {
        width: 14px;
        height: 14px;
        margin-right: 4px;
      }
    }
    .btn-back:hover {
      color: #409eff;
    }
    .line {
      width: 1px;
      height: 14px;
      background-color: #d8d8d8;
      margin-right: 15px;
      margin-left: 15px;
    }

    .name {
      font-size: 14px;
      font-weight: 600;
      color: #333;
    }
  }
  .user-import-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 30px 100px;
    border-radius: 15px;
    background-color: #fff;
    .select-down-box {
      display: flex;
      align-items: center;
      .select {
        display: flex;
        position: relative;
        align-items: center;
        a {
          position: absolute;
          left: 189px;
          display: block;
          width: 224px;
          margin-top: 45px;
          color: #409eff;
        }
        .file-box {
          position: relative;
          button,
          input {
            position: absolute;
          }
          input {
            z-index: 2;
            width: 159px;
            height: 40px;
            opacity: 0;
          }
        }
      }
    }
    .rules {
      color: #333;
      font-weight: 400;
      margin-top: 70px;
      .title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
      }
      .rule-item {
        margin-bottom: 15px;
        .item-title {
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 10px;
        }
        .item-desc {
          font-size: 14px;
          padding-top: 8px;
          padding-bottom: 8px;
          margin: 0;
          line-height: 18px;
          color: #333;
          display: flex;
          .c-red {
            color: #ff4d4f;
          }
        }
      }
    }
  }
}
</style>